<template>
  <div class="div-box flex-column flex-center">
    <div class="flex-row flex-center" style="width: 94%; height: 100%; gap: 20px">
      <div class="rightbox" style="position: relative;">
        <div v-if="recommendList.length>0" class="flex-row padding-25" style="flex-wrap: wrap;justify-content: space-evenly;gap: 12px;padding-top: 12px;">
          <recommand-card-all v-for="(item, index) in recommendList" :key="index" :teacherIf="item"></recommand-card-all>
          <div v-show="recommendList.length<8" style="position: absolute;bottom:20%;font-weight: bold;font-size: larger;font-family:pfsc">补充自己的详细信息可以获得更多推荐哦!</div>
        </div>
        <div v-else style="width: 100%;height: 100%;">
              <svg-icon iconClass="default" style="width: 100%;height: 100%;"></svg-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import recommandCardAll from "@/components/recommandCardAll.vue";
import WeightService from '@/service/WeightService';
import { Message } from 'element-ui';
export default {
  components: {
    recommandCardAll
  },
  data() {
    return {
      loading: true,
      level: "",
      // 发表论文数
      NumberPapersPublish: "",
      // 被引用次数
      NumberCitations: "",
      // 核心发文数
      CorePublicationVolume: "",
      Hindex: "",
      Hmin: 0,
      Hmax: 0,
      // 研究方向
      directionRadio: "",
      researchDirection: [
        { label: "自然语言处理", value: "自然语言处理" },
        { label: "高性能计算", value: "高性能计算" },
        { label: "分布式计算", value: "分布式计算" },
        { label: "计算机视觉", value: "计算机视觉" },
        { label: "机器学习", value: "机器学习" },
        { label: "数据分析", value: "数据分析" },
        { label: "数据存储", value: "数据存储" },
        { label: "舆情监测", value: "舆情监测" },
        { label: "人机交互", value: "人机交互" },
        { label: "人工智能", value: "人工智能" },
        { label: "语音识别", value: "语音识别" },
        { label: "机器翻译", value: "机器翻译" },
        { label: "数据建模", value: "数据建模" },
        { label: "数据结构", value: "数据结构" },
        { label: "数据挖掘", value: "数据挖掘" },
        { label: "网络安全", value: "网络安全" },
        { label: "软件开发", value: "软件开发" },
        { label: "软件工程", value: "软件工程" },
        { label: "编译器", value: "编译器" },
        { label: "数据库", value: "数据库" },
        { label: "UI", value: "UI" },
      ],
      levels: [
        {
          label: "211",
          value: "211",
        },
        {
          label: "985",
          value: "985",
        },
        {
          label: "普通本科",
          value: "普通本科",
        },
        {
          label: "研究所",
          value: "研究所",
        },
        {
          label: "港澳台",
          value: "港澳台",
        },
      ],
      isDisabled: false,
      num: 0,
      schoolLevels: [
        { label: "A+", value: "A+" },
        { label: "A", value: "A" },
        { label: "A-", value: "A-" },
        { label: "B+", value: "B+" },
        { label: "B", value: "B" },
        { label: "B-", value: "B-" },
        { label: "C+", value: "C+" },
        { label: "C", value: "C" },
        { label: "C-", value: "C-" },
      ],
      schoolLevel: "",
      pages: {
        pageSize: 10,
        pageNum: 1
      },
      totalPage: 0,
      recommendList: [],
      ruleForm: {
        departmentSet: 0.35,
        searchWaySet: 0.4,
        hobbySet: 0.25,
      }
    };
  },
  mounted() {
    this.getRecommend()
  },
  methods: {
    showLoading() {
      this.loading = false
    },
    async getRecommend() {
      if (sessionStorage['recommendSet']!=null) {
        this.ruleForm = JSON.parse(sessionStorage.getItem("recommendSet"))
      }
      try {
        const params = {
          id: sessionStorage.getItem("userId"),
          ...this.ruleForm,
          userType: "student",
        };
        const response = await WeightService.getRecommend(params);
        if (response.code == 0) {
          this.recommendList = response.data[0];
        }
      } catch (error) {
        Message.error(error);
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-family: fantasy;
}

.box {
  background: rgba(247, 248, 250, 1);
  padding: 12px 12px;
  border-radius: 35px;
}

.leftBox::-webkit-scrollbar {
  display: none;
}

.rightbox::-webkit-scrollbar {
  display: none;
}

.rightbox {
  width: 100%;
  height: 96%;
  background-color: white;
  overflow-x: scroll;
}

.el-select {
  .el-tag.el-tag--info {
    color: #409eff;
    background-color: #ecf5ff;
  }
}
</style>

<style lang="scss" scoped>
$count: 7;

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  filter: blur(4px) contrast(8);
  background: #000;
  display: flex;
}

.g-container {
  margin: auto;
  position: relative;
  width: 100%;
  height: 100%;
}

.g-ball,
.g-first {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  background: #d83f3f;
  border-radius: 50%;
  transform: translate(-700%, 0);
  opacity: 0;
}

@for $i from 0 through $count {
  .g-ball:nth-child(#{$i}) {
    animation: move 3.5s infinite #{$i * 0.2 + 0.1}s linear;
  }
}

.g-first {
  animation: scaleMove 3.5s infinite linear;
}

@keyframes move {
  25% {
    opacity: 1;
    transform: translate(-1vw, 0);
  }

  50% {
    opacity: 1;
    transform: translate(1vw, 0);
  }

  75%,
  100% {
    opacity: 0;
    transform: translate(700%, 0);
  }
}


@keyframes scaleMove {
  25% {
    opacity: 1;
    transform: translate(-1vw, 0);
  }

  35% {
    opacity: 1;
    transform: scale(1);
  }

  70% {
    opacity: 1;
    transform: translate(1vw, 0) scale(2);
  }

  90%,
  100% {
    opacity: 0;
    transform: translate(1vw, 0) scale(1);
  }
}
</style>